<template>
	<view>
		<view class="goods-box">
			<view class="goods-list" :style="{ margin: `${showData.styleMargin}px`, backgroundColor: showData.bgColor }">
				<view
					v-if="showData.goodsList && showData.goodsList.length && showData.goodsList[0].id"
					v-for="(item, index) in showData.goodsList"
					:key="index"
					class="goods-li"
					:style="{ padding: `${showData.stylePadding}px` }"
					:class="{ 'is-goods-cell2': showData.showType === '2', 'is-goods-cell3': showData.showType === '3' }"
				>
					<view class="goods-li-box">
						<navigator hover-class="none" :url="'/pages/product/goods-detail/index?id=' + item.id">
							<view class="goods-item" @tap="" :style="{ borderRadius: showData.cornerStyle == '1' ? '0px' : '10px' }">
								<view class="goods-img-one" :style="{ backgroundImage: 'url(' + item.spuUrls[0] + ')' }"> </view>
								<view class="goods-box-info">
									<view class="goods-info-title">
										{{ item.name }}
									</view>
									<view class="goods-info-desc" v-if="showData.showDesc">
										{{ item.subTitle }}
									</view>
									<view class="goods-info-price">
										<view class="text-price">
											{{ item.lowPrice }}
										</view>
										<view class="goods-info-buy-btn">
											<u-icon v-if="showData.buyBtnStyle === '1'" name="bag"></u-icon>
											<u-icon v-if="showData.buyBtnStyle === '2'" name="shopping-cart"></u-icon>
											<u-tag v-if="showData.buyBtnStyle === '3'" :text="showData.buyBtnText" mode="dark" type="error" size="mini" />
										</view>
									</view>
								</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
defineProps({
	showData: {
		type: Object,
		default: () => {},
	},
});
</script>

<style scoped lang="scss">
.goods-box {
	position: relative;

	.goods-list {
		display: flex;
		flex-wrap: wrap;

		.goods-li {
			width: 100%;

			&.is-goods-cell2 {
				width: 50%;
			}

			&.is-goods-cell3 {
				width: 33.33%;
			}

			.goods-li-box {
				padding: 10px 5px;
				.goods-item {
					position: relative;
					background-color: #fff;
					padding: 10px;
					.goods-img-one {
						width: 100%;
						background-repeat: no-repeat;
						background-size: cover;

						&::before {
							content: '';
							padding-top: 100%;
							float: left;
						}

						&::after {
							content: '';
							display: block;
							clear: both;
						}
					}

					.goods-box-info {
						margin-top: 3px;

						.goods-info-title {
							width: 100%;
							font-size: 12px;
							overflow: hidden;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							-webkit-text-overflow: ellipsis;
							-moz-text-overflow: ellipsis;
							white-space: nowrap;
						}

						.goods-info-desc {
							width: 100%;
							font-size: 12px;
							overflow: hidden;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							-webkit-text-overflow: ellipsis;
							-moz-text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 5px;
						}

						.goods-info-price {
							position: relative;
							margin-top: 10px;
							color: red;

							&.goods-cell-3 {
								padding-right: 20px;
							}

							.price-info {
								width: 100%;
								font-size: 15px;
								overflow: hidden;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
								-webkit-text-overflow: ellipsis;
								-moz-text-overflow: ellipsis;
								white-space: nowrap;
							}

							.goods-info-buy-btn {
								position: absolute;
								top: 0;
								right: 0;

								.el-button {
									line-height: 22px;
									height: 24px;
									padding: 0 7px;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
